<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style>
			.handler {
				width: 10px; height: 10px; background-color: #3399FF;
				position: absolute;
			}
			.left-handler{ left: 0px; }
			.top-handler { top: 0px; }
			.right-handler { right: 0px; }
			.bottom-handler { bottom: 0px; }
			.left-handler.top-handler {cursor: nw-resize}
			.left-handler.bottom-handler {cursor: sw-resize}
			.right-handler.top-handler {cursor: ne-resize}
			.right-handler.bottom-handler {cursor: se-resize}
			.img-mask {cursor: crosshair;}
		</style>
	</head>
	<body>
		<div>
			<div id="wrapper" style="width: 500px; height: 400px; position: relative; border: 1px solid #f00; margin: 100px auto 0px; text-align: center;">
				<img id="img" src="C:\Users\yangziwen\Pictures\sheep4.jpg" style="max-width: 500px; max-height: 400px; border: 1px solid #ddd; margin-top: -1px;" />
				<div id="mask" class="img-mask" style="width: 300px; height: 300px; border: 1px dashed #000; position: absolute; left: 100px; top: 50px;">
					<div class="handler left-handler top-handler"></div>
					<div class="handler left-handler bottom-handler"></div>
					<div class="handler right-handler top-handler"></div>
					<div class="handler right-handler bottom-handler"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
		var maskMousedown = false;
		var oriMaskPos = {left: 0, top: 0};
		var oriDiff = {left: 0, top: 0};
		var $mask = $('#mask');
		var $img = $('#img');
		var imgPos = $.extend({}, $img.position(), {
			width: $img.width(),
			height: $img.height()
		});
		$('#mask').on('mousedown', function(ev) {
			var $mask = $(this);
			var oriMousePos = {left: ev.pageX, top: ev.pageY}
			oriMaskPos = $.extend({
				width: $mask.width(),
				height: $mask.height()
			}, $mask.position());
			oriDiff = {
				left: oriMaskPos.left - ev.pageX, 
				top: oriMaskPos.top - ev.pageY
			};
			maskMousedown = true;
		});
		$(document).on('mousemove', function(ev) {
			if(!maskMousedown) return;
			var left = oriDiff.left + ev.pageX,
				top = oriDiff.top + ev.pageY,
				width = $mask.width(),
				height = $mask.height();
			left < imgPos.left && (left = imgPos.left);
			top < imgPos.top && (top = imgPos.top);
			left + width > imgPos.left + imgPos.width && (left = imgPos.left + imgPos.width - width);
			top + height > imgPos.top + imgPos.height && (top = imgPos.top + imgPos.height - height);
			
			if($activeHandler != null) {
				var width = 0, height = 0;
				if($activeHandler.hasClass('left-handler')) {
					width = oriMaskPos.width + oriMaskPos.left - left;
					if(width < 20) {
						left = left + width - 20;
						width = 20; 
					}
					$mask.width(width);
				}
				if($activeHandler.hasClass('top-handler')) {
					height = oriMaskPos.height + oriMaskPos.top - top;
					if(height < 20) {
						top = top + height - 20;
						height = 20;
					}
					$mask.height(height);
				}
				if($activeHandler.hasClass('right-handler')) {
					left = oriMaskPos.left;
					width = oriMaskPos.width + oriDiff.left + ev.pageX - left;
					if(width < 20) {
						width = 20;
					} else if(left + width > imgPos.left + imgPos.width) {
						width = imgPos.left + imgPos.width - left;
					}
					$mask.width(width);
				}
				if($activeHandler.hasClass('bottom-handler')) {
					top = oriMaskPos.top;
					height = oriMaskPos.height + oriDiff.top + ev.pageY - top;
					if(height < 20) {
						height = 20;
					} else if(top + height > imgPos.top + imgPos.height) {
						height = imgPos.top + imgPos.height - top;
					}
					$mask.height(height);
				}
			}
			moveMask($mask, left, top);
		})
		$(document).on('mouseup', function() {
			maskMousedown = false;
			$activeHandler = null;
		});
		
		var $activeHandler = null;
		$mask.children('.handler').on('mousedown', function(ev) {
			$activeHandler = $(this);
		});
		
		function moveMask($mask, left, top) {
			$mask.css({left: left, top: top});
		}
		
		function getCutInfo() {
			var $mask = $('#mask');
			var $img = $('#img');
			var maskPos = $mask.position();
			var imgPos = $img.position();
			return {
				left: maskPos.left - imgPos.left,
				top: maskPos.top - imgPos.top,
				width: $mask.width(),
				height: $mask.height()
			}
		}
	</script>
</html>
